.menu-icon
  +fa(14px, 16px)
  color: $text-light
  float: left
  margin: 0 4px 0 -2px
  .fa
    font-size: inherit
    line-height: inherit

.menu-heading
  background: $background
  border-bottom: 1px solid $border
  border-radius: 4px 4px 0 0
  color: $text-strong
  font-size: $size-medium
  font-weight: 300
  padding: 10px

.menu-list
  a
    color: $text
    &:hover
      color: $link

.menu-tabs
  display: flex
  font-size: $size-small
  padding: 5px 10px 0
  justify-content: center
  &:not(:last-child)
    border-bottom: 1px solid $border
  a
    border-bottom: 1px solid $border
    margin-bottom: -1px
    padding: 5px
    &.is-active
      border-bottom-color: $link-active-border
      color: $link-active

.menu-block
  color: $text-strong
  display: block
  line-height: 16px
  padding: 10px
  &:not(:last-child)
    border-bottom: 1px solid $border
  .checkbox
    border: 1px solid transparent
    border-radius: $radius
    display: block
    padding: 8px
    padding-left: 32px
    input
      left: 9px
      top: 9px
    &:hover
      border-color: $link

a.menu-block:hover
  background: $background

.menu-checkbox
  @extend .checkbox
  display: block
  padding: 9px 10px 9px 30px
  &:not(:last-child)
    border-bottom: 1px solid $border
  input
    left: 8px
    top: 10px

.menu
  border: 1px solid $border
  border-radius: 5px
  &:not(:last-child)
    margin-bottom: 20px
